<template>
  <button @click="flag = !flag">Toggle</button>
  <Transition :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
    <h1 v-if="flag">Hello, GSAP.</h1>
  </Transition>
</template>

<script setup>
import { gsap } from 'gsap'
import { ref } from 'vue'

const flag = ref(false)

const onBeforeEnter = (el) => {
  gsap.set(el, {
    opacity: 0,
    marginLeft: 0,
    color: 'white'
  })
}
const onEnter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    duration: 1.5,
    color: 'red',
    marginLeft: 100,
    ease: 'elastic',
    onComplete: done
  })
}
const onLeave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    duration: 1,
    color: 'blue',
    marginLeft: 0,
    ease: 'back',
    onComplete: done
  })
}
</script>

<style scoped></style>
